<template>
    <div class="qilin-eharts qilin-px-2 qilin-pb-8">
        <QilinExplain title="echarts饼图显示中间文字切换" date="2023-03-10">
            <template v-slot:content>
                <div id="text-echarts" style="width:100%;height:300px;"></div>
                <CodeMirror :codeValue="getCodeValue2"></CodeMirror>
            </template>
        </QilinExplain>
        <QilinExplain title="echarts图表轮播" date="2022-12-16">
            <template v-slot:content>
                <div id="swiper-echarts" style="width:100%;height:400px;"></div>
                <CodeMirror :codeValue="getCodeValue1"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>
<script>
import QilinExplain from "@/components/QilinExplain.vue";
import CodeMirror from "@/components/CodeMirror.vue";
import * as echarts from "echarts";
export default {
    components: {
        QilinExplain,
        CodeMirror,
    },
    data() {
        return {};
    },
    computed:{
        // 获取echarts图表轮播的核心代码    
        getCodeValue1(){
            return `
                initEcharts1() {
                    let allData1 = [
                        { name: "山东", value: 84737 },
                        { name: "贵州", value: 20808 },
                        { name: "江西", value: 31883 },
                        { name: "重庆", value: 26070 },
                        { name: "内蒙古", value: 16308 },
                        { name: "湖北", value: 43956 },
                        { name: "辽宁", value: 41150 },
                        { name: "湖南", value: 44386 },
                        { name: "福建", value: 51290 },
                        { name: "上海", value: 58547 },
                        { name: "北京", value: 75911 },
                        { name: "广西", value: 28682 },
                        { name: "广东", value: 204698 },
                        { name: "四川", value: 61059 },
                        { name: "云南", value: 27707 },
                        { name: "江苏", value: 109264 },
                        { name: "浙江", value: 115958 },
                        { name: "青海", value: 3423 },
                        { name: "宁夏", value: 4742 },
                        { name: "河北", value: 41415 },
                        { name: "黑龙江", value: 26215 },
                        { name: "吉林", value: 20592 },
                        { name: "天津", value: 19235 },
                        { name: "陕西", value: 32019 },
                        { name: "甘肃", value: 13294 },
                        { name: "新疆", value: 10461 },
                        { name: "河南", value: 54371 },
                        { name: "安徽", value: 41701 },
                        { name: "山西", value: 24752 },
                        { name: "海南", value: 9279 },
                        { name: "台湾", value: 587 },
                        { name: "西藏", value: 1790 },
                        { name: "香港", value: 1655 },
                        { name: "澳门", value: 1014 },
                    ];
                    let myEcharts1 = echarts.init(
                        document.getElementById("swiper-echarts")
                    );
                    let dynamicVariable1 = {
                        startValue: 0,
                        endValue: 9,
                        timeId: null,
                    };
                    //初始化图表
                    function initEcharts1() {
                        //初始化图表配置
                        const initOption = {
                            title: {
                                text: "各省热度排行",
                                top: "3%",
                                left: "3%",
                            },
                            grid: {
                                top: "20%",
                                left: "5%",
                                right: "5%",
                                bottom: "5%",
                                containLabel: true,
                            },
                            tooltip: {
                                show: true,
                            },
                            xAxis: {
                                type: "category",
                            },
                            yAxis: {
                                type: "value",
                                splitLine: {
                                    show: false,
                                },
                            },
                            series: [
                                {
                                    type: "bar",
                                },
                            ],
                        };
                        myEcharts1.setOption(initOption);
                    }
                    function getData1() {
                        //排序
                        allData1.sort((a, b) => {
                            return b.value - a.value;
                        });
                        //更新图表
                        updateEcharts1();
                    }
                    function updateEcharts1() {
                        //横坐标数据（省份）
                        const provinceArr = allData1.map((item) => {
                            return item.name;
                        });
                        //纵坐标数据（数值）
                        const valueArr = allData1.map((item) => {
                            return item.value;
                        });
                        //颜色列表
                        const colorArr = [
                            ["#0ba82c", "#4ff778"],
                            ["#2e72bf", "#23e5e5"],
                            ["#5052ee", "#ab6ee5"],
                        ];
                        //更新数据
                        const dataOption = {
                            dataZoom: {
                                show: false,
                                startValue: dynamicVariable1.startValue,
                                endValue: dynamicVariable1.endValue,
                            },
                            xAxis: {
                                data: provinceArr,
                            },
                            series: [
                                {
                                    data: valueArr,
                                    itemStyle: {
                                        color: (arg) => {
                                            //柱状颜色线性渐变
                                            let targetArr = null;
                                            if (arg.data > 60000) {
                                                targetArr = colorArr[0];
                                            } else if (arg.data > 30000) {
                                                targetArr = colorArr[1];
                                            } else {
                                                targetArr = colorArr[2];
                                            }
                                            return new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [
                                                    {
                                                        offset: 0,
                                                        color: targetArr[0],
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: targetArr[1],
                                                    },
                                                ]
                                            );
                                        },
                                    },
                                },
                            ],
                        };
                        myEcharts1.setOption(dataOption);
                    }
                    //添加定时器
                    function startInterval() {
                        if (dynamicVariable1.timeId) {
                            clearInterval(dynamicVariable1.timeId);
                        }
                        dynamicVariable1.timeId = setInterval(() => {
                            if (dynamicVariable1.endValue > allData1.length - 1) {
                                // (dynamicVariable1.startValue=0),(dynamicVariable1.endValue=9);//特殊写法--没学过
                                dynamicVariable1.startValue = 0;
                                dynamicVariable1.endValue = 9;
                            }
                            dynamicVariable1.startValue++;
                            dynamicVariable1.endValue++;
                            updateEcharts1();
                        }, 1000);
                    }
                    initEcharts1();
                    getData1();
                    startInterval();
                    //鼠标移入停止轮播，移出继续轮播
                    myEcharts1.on("mouseover", () => {
                        clearInterval(dynamicVariable1.timeId);
                    });
                    myEcharts1.on("mouseout", () => {
                        startInterval();
                    });
                }
            `;
        },
        // 获取echarts饼图文字显示切换的核心代码
        getCodeValue2(){
            return `
                initEcharts2(){
                    let myEcharts2=echarts.init(document.getElementById("text-echarts"));
                    let data=[
                        {
                            name:"加班申请",
                            value:9
                        },
                        {
                            name:"请假申请",
                            value:2
                        },
                        {
                            name:"出差申请",
                            value:1
                        },
                        {
                            name:"报销申请",
                            value:1
                        }
                    ];
                    let count=0;
                    let nameArr=data.map((item)=>{
                        count+=item.value;
                        return item.name+item.value+"次";
                    });
                    let colors=['#2ca1ff','#0adbfa','#febe13','#65e5dd','#7b2cff','#fd5151','#f071ff', '#85f67a','#0baefd','#fdcd0b','#0bfdab','#ff5353','#ff72cb','#8488ff'];
                    let options={
                        backgroundColor:"#fff",
                        color:colors,
                        tooltip:{
                            show:false
                        },
                        title:{
                            show:true,
                            text:"申请总数量",
                            top:"center",
                            left:"30%",
                            textAlign:"center",
                            textStyle:{
                                color:"#8C9FAD",
                                fontSize:16
                            },
                            itemGap:15,
                            subtext:count,
                            subtextStyle:{
                                fontSize:30,
                                fontWeight:"bold",
                                align:"center",
                                color:"#000"
                            }
                        },
                        legend:{
                            type:"plain",
                            icon:"circle",
                            top:"28%",
                            right:"5%",
                            orient:"vertical",
                            itemWidth:8,
                            itemHeight:8,
                            itemGap:20,
                            formatter:(name)=>{
                                // console.log(name);
                                let totalValue=0;
                                data.forEach((item)=>{
                                    totalValue+=item.value;
                                });
                                for(let i in data){
                                    if(data[i].name === name){
                                        return "{name|****}{separate||}{percent|****%}{number|****}次}"
                                    };
                                };
                            },
                            textStyle:{
                                rich:{
                                    name:{
                                        fontSize:14,
                                        color:"#333",
                                        width:100,
                                        padding:[0,0,0,5]
                                    },
                                    separate:{
                                        color:"#D6D9DC",
                                        padding:[0,10,0,10]
                                    },
                                    percent:{
                                        fontSize:14,
                                        color:"#8C9FAD",
                                        padding:[2,0,0,0],
                                        width:60,
                                        textAlign:"left"
                                    },
                                    number:{
                                        fontSize:14,
                                        color:"rgba(0,0,0,0.65)",
                                        padding:[0,0,0,0]
                                    }
                                }
                            }
                        },
                        series:[
                            {
                                name:"数据统计",
                                type:"pie",
                                clockWise:true,
                                radius:["50%","70%"],
                                center:["25%","50%"],
                                height:"100%",
                                hoverAnimation:false,
                                avoidLabelOverlap: false,
                                top:"center",
                                label:{
                                    show:false,
                                    position:"center"
                                    // position:"outside"
                                },
                                emphasis:{
                                    label:{
                                        show:true,
                                        formatter:(params)=>{
                                            return "{label|****数量}{value|****}"
                                        },
                                        rich:{
                                            label:{
                                                color:"#8C9FAD",
                                                fontSize:16,
                                                align:"center",
                                                padding:[15,0,0,5],
                                                textAlign:"center",
                                                fontWeight:"bold"
                                            },
                                            value:{
                                                color:"#000",
                                                fontWeight:"bold",
                                                fontSize:30,
                                                align:"center",
                                                padding:[10,0,0,0]
                                            }
                                        }
                                    }
                                },
                                itemStyle:{
                                    normal:{
                                        borderWidth:10,
                                        borderColor:"#fff",
                                        borderRadius:20
                                    }
                                },
                                labelLine:{
                                    show:false
                                },
                                data
                            }
                        ]
                    };
                    myEcharts2.setOption(options);
                    function hideHighlight(){
                        data.forEach((item,index)=>{
                            myEcharts2.dispatchAction({
                                type:"downplay",
                                dataIndex:index
                            });
                        });
                    };
                    myEcharts2.on("mouseover",(params)=>{
                        hideHighlight();
                        myEcharts2.dispatchAction({
                            type:"highlight",
                            dataIndex:params.dataIndex
                        });
                    });
                    myEcharts2.on("mouseout",(params)=>{
                        hideHighlight();
                        options.title.show=true;
                        myEcharts2.setOption(options);
                    });
                    myEcharts2.on("highlight",(params)=>{
                        options.title.show=false;
                        myEcharts2.setOption(options);
                    });
                    myEcharts2.on("downplay",(params)=>{
                        options.title.show=true;
                        myEcharts2.setOption(options);
                    })
                    window.addEventListener('resize',function () {//执行
                        myEcharts2.resize();
                    });
                }
            `
        }
    },
    methods: {
        // 初始化图表轮播
        initEcharts1() {
            let allData1 = [
                { name: "山东", value: 84737 },
                { name: "贵州", value: 20808 },
                { name: "江西", value: 31883 },
                { name: "重庆", value: 26070 },
                { name: "内蒙古", value: 16308 },
                { name: "湖北", value: 43956 },
                { name: "辽宁", value: 41150 },
                { name: "湖南", value: 44386 },
                { name: "福建", value: 51290 },
                { name: "上海", value: 58547 },
                { name: "北京", value: 75911 },
                { name: "广西", value: 28682 },
                { name: "广东", value: 204698 },
                { name: "四川", value: 61059 },
                { name: "云南", value: 27707 },
                { name: "江苏", value: 109264 },
                { name: "浙江", value: 115958 },
                { name: "青海", value: 3423 },
                { name: "宁夏", value: 4742 },
                { name: "河北", value: 41415 },
                { name: "黑龙江", value: 26215 },
                { name: "吉林", value: 20592 },
                { name: "天津", value: 19235 },
                { name: "陕西", value: 32019 },
                { name: "甘肃", value: 13294 },
                { name: "新疆", value: 10461 },
                { name: "河南", value: 54371 },
                { name: "安徽", value: 41701 },
                { name: "山西", value: 24752 },
                { name: "海南", value: 9279 },
                { name: "台湾", value: 587 },
                { name: "西藏", value: 1790 },
                { name: "香港", value: 1655 },
                { name: "澳门", value: 1014 },
            ];
            let myEcharts1 = echarts.init(
                document.getElementById("swiper-echarts")
            );
            let dynamicVariable1 = {
                startValue: 0,
                endValue: 9,
                timeId: null,
            };
            //初始化图表
            function initEcharts1() {
                //初始化图表配置
                const initOption = {
                    title: {
                        text: "各省热度排行",
                        top: "3%",
                        left: "3%",
                    },
                    grid: {
                        top: "20%",
                        left: "5%",
                        right: "5%",
                        bottom: "5%",
                        containLabel: true,
                    },
                    tooltip: {
                        show: true,
                    },
                    xAxis: {
                        type: "category",
                    },
                    yAxis: {
                        type: "value",
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: "bar",
                        },
                    ],
                };
                myEcharts1.setOption(initOption);
            }
            function getData1() {
                //排序
                allData1.sort((a, b) => {
                    return b.value - a.value;
                });
                //更新图表
                updateEcharts1();
            }
            function updateEcharts1() {
                //横坐标数据（省份）
                const provinceArr = allData1.map((item) => {
                    return item.name;
                });
                //纵坐标数据（数值）
                const valueArr = allData1.map((item) => {
                    return item.value;
                });
                //颜色列表
                const colorArr = [
                    ["#0ba82c", "#4ff778"],
                    ["#2e72bf", "#23e5e5"],
                    ["#5052ee", "#ab6ee5"],
                ];
                //更新数据
                const dataOption = {
                    dataZoom: {
                        show: false,
                        startValue: dynamicVariable1.startValue,
                        endValue: dynamicVariable1.endValue,
                    },
                    xAxis: {
                        data: provinceArr,
                    },
                    series: [
                        {
                            data: valueArr,
                            itemStyle: {
                                color: (arg) => {
                                    //柱状颜色线性渐变
                                    let targetArr = null;
                                    if (arg.data > 60000) {
                                        targetArr = colorArr[0];
                                    } else if (arg.data > 30000) {
                                        targetArr = colorArr[1];
                                    } else {
                                        targetArr = colorArr[2];
                                    }
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: targetArr[0],
                                            },
                                            {
                                                offset: 1,
                                                color: targetArr[1],
                                            },
                                        ]
                                    );
                                },
                            },
                        },
                    ],
                };
                myEcharts1.setOption(dataOption);
            }
            //添加定时器
            function startInterval() {
                if (dynamicVariable1.timeId) {
                    clearInterval(dynamicVariable1.timeId);
                }
                dynamicVariable1.timeId = setInterval(() => {
                    if (dynamicVariable1.endValue > allData1.length - 1) {
                        // (dynamicVariable1.startValue=0),(dynamicVariable1.endValue=9);//特殊写法--没学过
                        dynamicVariable1.startValue = 0;
                        dynamicVariable1.endValue = 9;
                    }
                    dynamicVariable1.startValue++;
                    dynamicVariable1.endValue++;
                    updateEcharts1();
                }, 1000);
            }
            initEcharts1();
            getData1();
            startInterval();
            //鼠标移入停止轮播，移出继续轮播
            myEcharts1.on("mouseover", () => {
                clearInterval(dynamicVariable1.timeId);
            });
            myEcharts1.on("mouseout", () => {
                startInterval();
            });
            window.addEventListener('resize',function () {//执行
                myEcharts1.resize();
            });
        },
        // 初始化饼图文字显示切换
        initEcharts2(){
            let myEcharts2=echarts.init(document.getElementById("text-echarts"));
            let data=[
                {
                    name:"加班申请",
                    value:9
                },
                {
                    name:"请假申请",
                    value:2
                },
                {
                    name:"出差申请",
                    value:1
                },
                {
                    name:"报销申请",
                    value:1
                }
            ];
            let count=0;
            let nameArr=data.map((item)=>{
                count+=item.value;
                return item.name+item.value+"次";
            });
            let colors=['#2ca1ff','#0adbfa','#febe13','#65e5dd','#7b2cff','#fd5151','#f071ff', '#85f67a','#0baefd','#fdcd0b','#0bfdab','#ff5353','#ff72cb','#8488ff'];
            let options={
                backgroundColor:"#fff",
                color:colors,
                tooltip:{
                    show:false
                },
                title:{
                    show:true,
                    text:"申请总数量",
                    top:"40%",
                    left:"25%",
                    textAlign:"center",
                    textStyle:{
                        color:"#8C9FAD",
                        fontSize:16
                    },
                    itemGap:15,
                    subtext:count,
                    subtextStyle:{
                        fontSize:30,
                        fontWeight:"bold",
                        align:"center",
                        color:"#000"
                    }
                },
                legend:{
                    type:"plain",
                    icon:"circle",
                    top:"28%",
                    right:"5%",
                    orient:"vertical",
                    itemWidth:8,
                    itemHeight:8,
                    itemGap:20,
                    formatter:(name)=>{
                        // console.log(name);
                        let totalValue=0;
                        data.forEach((item)=>{
                            totalValue+=item.value;
                        });
                        for(let i in data){
                            if(data[i].name === name){
                                return `{name|${name}}{separate||}{percent|${(data[i].value/totalValue).toFixed(2)*100}%}{number|${data[i].value}次}`
                            };
                        };
                    },
                    textStyle:{
                        rich:{
                            name:{
                                fontSize:14,
                                color:"#333",
                                width:100,
                                padding:[0,0,0,5]
                            },
                            separate:{
                                color:"#D6D9DC",
                                padding:[0,10,0,10]
                            },
                            percent:{
                                fontSize:14,
                                color:"#8C9FAD",
                                padding:[2,0,0,0],
                                width:60,
                                textAlign:"left",
                            },
                            number:{
                                fontSize:14,
                                color:"rgba(0,0,0,0.65)",
                                padding:[0,0,0,0]
                            }
                        }
                    }
                },
                series:[
                    {
                        name:"数据统计",
                        type:"pie",
                        clockWise:true,
                        radius:["50%","70%"],
                        center:["25%","50%"],
                        height:"100%",
                        hoverAnimation:false,
                        avoidLabelOverlap: false,
                        top:"center",
                        label:{
                            show:false,
                            position:"center"
                            // position:"outside"
                        },
                        emphasis:{
                            label:{
                                show:true,
                                formatter:(params)=>{
                                    return `{label|${params.name}数量}\n{value|${params.value}}`
                                },
                                rich:{
                                    label:{
                                        color:"#8C9FAD",
                                        fontSize:16,
                                        align:"center",
                                        padding:[15,0,0,5],
                                        textAlign:"center",
                                        fontWeight:"bold"
                                    },
                                    value:{
                                        color:"#000",
                                        fontWeight:"bold",
                                        fontSize:30,
                                        align:"center",
                                        padding:[15,0,0,0]
                                    }
                                }
                            }
                        },
                        itemStyle:{
                            normal:{
                                borderWidth:10,
                                borderColor:"#fff",
                                borderRadius:20
                            }
                        },
                        labelLine:{
                            show:false
                        },
                        data
                    }
                ]
            };
            myEcharts2.setOption(options);
            function hideHighlight(){
                data.forEach((item,index)=>{
                    myEcharts2.dispatchAction({
                        type:"downplay",
                        dataIndex:index
                    });
                });
            };
            myEcharts2.on("mouseover",(params)=>{
                hideHighlight();
                myEcharts2.dispatchAction({
                    type:"highlight",
                    dataIndex:params.dataIndex
                });
            });
            myEcharts2.on("mouseout",(params)=>{
                hideHighlight();
                options.title.show=true;
                myEcharts2.setOption(options);
            });
            myEcharts2.on("highlight",(params)=>{
                options.title.show=false;
                myEcharts2.setOption(options);
            });
            myEcharts2.on("downplay",(params)=>{
                options.title.show=true;
                myEcharts2.setOption(options);
            })
            window.addEventListener('resize',function () {//执行
                myEcharts2.resize();
            });
        }
    },
    mounted() {
        this.initEcharts1();
        this.initEcharts2();
    },
};
</script>